<template>
  <div id="app">
    <global-layout>
      <template v-slot:el-header>
        <header-bar></header-bar>
      </template>
      <template v-slot:el-main>
        <main-page></main-page>
      </template>
    </global-layout>
  </div>
</template>

<script>
import GlobalLayout from "@/components/layout/GlobalLayout.vue";
import HeaderBar from "@/components/layout/HeaderBar.vue";
import MainPage from "@/views/MainPage.vue";

export default {
  name: "App",
  components: {
    GlobalLayout,
    HeaderBar,
    MainPage,
  },
};
</script>

<style>
#app {
  width: 1200px;
  margin: 0 auto;
  /* background-color: #f4f4f4; */
}
</style>
